import { useEffect, useState } from 'react'
import './App.css'
import { Button, InfiniteScroll } from 'antd-mobile'
import axios from 'axios'

function App() {

  let [dataList, setDataList] = useState([])
  //当前页
  let [pageCode, setPageCode] = useState(1)

  const FetchList = async () => {
    let res = await axios.get('/api/room/list', { params: { pageCode } })
    console.log('res', res)
    let newData = res.data.data.list
    setDataList([...dataList, ...newData])
    setPageCode(pageCode + 1)
  }

  // useEffect(() => {
  //   FetchList()
  // }, [])

  return (
    <div>
      <Button color='primary' fill='solid'>
        Solid
      </Button>
      <div>
        {
          dataList && dataList.map((item, index) => (<dl>
            <dt>
              <img src={item.url} alt="" />
            </dt>
            <dd>
              <p>{item.title}</p>
              <p>{item.name}</p>
            </dd>
          </dl>))
        }
      </div>
      <InfiniteScroll loadMore={FetchList} hasMore={true} />
    </div>
  )
}

export default App
